<template>
  <div>
    <div id="video-container">
      <video ref="videoPlayer" controls>
        <source :src="videoPath" type="video/mp4">
      </video>
    </div>
  </div>
</template>

<script>
export default {
  // name: "play-video"
  data() {
    return {
      videoPath: 'path/to/video.mp4'
    };
  },
  mounted() {
    this.$refs.videoPlayer.addEventListener('play', this.handlePlay);
    this.$refs.videoPlayer.addEventListener('pause', this.handlePause);
  },
  methods: {
    handlePlay() {
      // 视频开始播放时的操作
    },
    handlePause() {
      // 视频暂停时的操作
    },
    // 其他方法和事件处理函数...
  }
}
</script>

<style scoped>
#video-container {
  width: 800px;
  height: 400px;
}
</style>